const tags = document.getElementById('tags')
const textarea = document.getElementById('textarea')

// textarea.focus()

textarea.addEventListener('keyup', (e) => {
    createTag(e.target.value)
    if (e.key === 'Enter') {
        setTimeout(()=>{
            e.target.value = ''
        },100)
        randomSelect()
    }
})

function createTag(text) {
    let textArr = text.split(',').filter(tag => tag.trim() !== '')
    tags.innerHTML = ''
    textArr.forEach(t => {
        const tag = document.createElement('div')
        tag.classList.add('tag')
        tag.innerText = t
        tags.appendChild(tag)
    })

}

function randomSelect() {
    const tags = document.querySelectorAll('.tag')
    let interval = setInterval(() => {
        const tag = tags[Math.floor(Math.random() * tags.length)]
        if(tag){
            tag.classList.add('highlight')
            setTimeout(() => {
                tag.classList.remove('highlight')
            }, 100)
        }
    }, 100);
    setTimeout(()=>{
        clearInterval(interval)
        tags[Math.floor(Math.random() * tags.length)].classList.add('highlight')
    },3000)
}